<template>
  <div class="choice-header" v-if="isShowEnterprise">
    <div @click="handleClick" class="choice-body">
      <img :src="imgSrc" alt="" width="15px" height="15px">
      <span class="span-style"> {{ companyName }} </span>
    </div>

    <div v-if="isShow" class="company-list">
      <div v-for="item in (companyName=='全县'? companyList : _companyList)" :key="item.id" class="list-style" @click="companyChange(item)">{{item.companyName}}</div>
    </div>
  </div>
</template>
<script>
import rightArrow from '@/assets/images/right-arrow.png';
import downArrow from '@/assets/images/down-arrow.png';

export default {
  props: {
    companyList: {
      type: Array,
      default: () => []
    },
    isShowEnterprise: {
      type: Boolean,
      default: true
    },
    isShowCounty: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgSrc: rightArrow,
      isShow: false,
      defaultCompany: {
        id: '',
        companyName: '全县'
      },
      companyName: '全县'
    }
  },
  watch: {
    isShow(newVal) {
      if(!newVal) {
        this.imgSrc = rightArrow;
      }else {
        this.imgSrc = downArrow;
      }
    },
    companyList() {
      if(this.$route.query.id){
        let obj = this.companyList.find( item => {
          return item.id == this.$route.query.id
        })
        this.companyName = obj.companyName;
      }
    }
  },
  computed: {
    _companyList() {
      return this.isShowEnterprise ? [this.defaultCompany].concat(this.companyList) : this.companyList;
    },
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow;
    },
    companyChange(item) {
      this.isShow = false;
      this.companyName = item.companyName;
      this.$emit('EnterpriseChoiceItem', item);
    }
  }
}
</script>
<style lang="scss" scoped>
.choice-header {
  z-index:2 !important;
  display: inline-flex;
  height: 100%;
  width: 2.1rem;
  // transform: translate(.05rem, .03rem);
  // position: relative;
  cursor: pointer;

  .choice-body {
    display: flex;
    align-items: center;

    .span-style {
      color: #FFFFFF;
      font-size: .12rem;
      font-family: Source Han Sans CN;
      margin-left: .05rem;
      // position: absolute;
      // top: -0.01rem;
    }
  }

  .company-list {
    z-index: 999;
    position: absolute;
    width: 2.1rem;
    height: 2rem;
    top: 0.3rem;
    background: rgba(12,45,53,0.8);
    border-radius: .16rem;
    overflow-y: auto;
    padding-left: .2rem;
    padding-right: .2rem;

    &::-webkit-scrollbar {
      display: none;
    }

    .list-style {
      height: .27rem;
      padding: 0 5px;
      overflow: hidden;
      font-size: .12rem;
      line-height: .3rem;
      color: #FFFFFF;
      font-weight: 500;
      text-overflow: ellipsis;
      font-family: Source Han Sans CN;
    }
    :hover {
      background-color: rgba(72, 118, 130, 0.8);
      border-radius: 5px;
    }
  }
}

</style>
